<template>
	<scroll-view scroll-y @scrolltolower="scrolltolower" :style="{height: `calc(100% - 90rpx - ${CustomBar}px)`}">
		<view class="cu-card dynamic custom-follow">
			<block v-for="(item,index) of list" :key="item.id">
				<view class="cu-item padding-bottom custom-margin">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<image class="cu-avatar round" :src="item.avatar"/>
							<view class="content flex-sub flex justify-between align-center">
								<view class="flex-direction justify-between">
									<view class="text-sm">{{item.nickname}}</view>
									<view class="text-xs text-666 flex">
										<view class="margin-right-sm">视频{{item.videos_count}}</view>
										<view class="margin-right-sm">粉丝{{item.fans_count}}</view>
									</view>
								</view>
								<view>
									<button class="cu-btn round custom-btn-follow" @click="handleUnAttention(item.id,index)">
										取消关注
									</button>
								</view>
							</view>
						</view>
					</view>
					<view class="grid flex-sub padding-lr col-3 grid-square">
						<view v-for="(elem,sIndex) of item.videos" :key="elem.id">
							<view style="width: 100%;height:200rpx">
							<!-- <view style="width: 100%;height:200rpx" @click="showDetail(elem.id)"> -->
								
								<video controls object-fit="contain" :show-mute-btn="true" :enable-play-gesture="true" :show-center-play-btn="false"
								  :src="elem.video_url" :id="`video${elem.id}`" style="width:100%;height: 200rpx;" @error="videoError"
								  :data-index="index" v-if="elem.id===playId" :autoplay="true" />
								
								<view @click="handlePlay(elem.id)" v-else>
									<view class="img-mask"></view>
									<view class="img-box-play">
										<image src="/static/images/play-01.png" mode="widthFix" style="width:100%;height:100%"></image>
									</view>
									<image :src="elem.img" mode="aspectFit" style="width:100%;height: 200rpx;" />
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</scroll-view>
</template>

<script>
	import HVideo from "@/components/HVideo"
	export default {
		props: {
			TabCur: {
				type: [String, Number],
				default: 0
			},
		},
		data() {
			return {
				list: [],
				isMore: false,
				query: {
					category_id: "",
					page: 1,
					size: 10
				},
				playId:""
			}
		},
		components: {
			HVideo
		},
		methods: {
			async getUserRecommendList() {
				let {
					data
				} = await this.waitingLoading(this.$h.api.userModel.getRecommends)(this.query)
				console.log(data.data)
				this.isMore = data.data.length ===10
				if (this.query.page === 1) {
					this.list = [...data.data]
				} else {
					this.list = [...this.list, ...data.data]
				}
			},
			//刷新
			refresh(){
				this.getUserRecommendList()
			},
			async handleUnAttention(attention_user_id, index) {
				let query = {
					attention_user_id
				}
				let {
					code,
					msg
				} = await this.$h.api.userModel.postUnLike(query)
				if (code === 1) {
					this.getUserRecommendList()
				} else {
					list[index].attentionLoading = false
					this.$h.toast('请求出错')
				}
			},
			showDetail(id) {
				this.$h.router.push({
					path: "/pages/video/videoDetail",
					params: {
						id
					}
				})
			},
			scrolltolower() {
				if (this.isMore) {
					this.query.page++
					this.getUserRecommendList()
				}
			},
			async handlePlay(id) {
				this.playId=id
				//观看人数+1
				let query = {
					video_id: id
				}
				await this.$h.api.videoModel.postViewVideo(query)
			},
			videoError(err){
				console.log(err)
			}
		},
		watch: {
			TabCur(newVal) {
				if (newVal == 0) {
					this.getUserRecommendList()
					this.playId = ""
				}
			}
		},
		created() {
			this.getUserRecommendList()
		}
	}
</script>

<style lang="scss" scoped>
	.cu-card {
		padding-top: 20rpx;

		.cu-item.custom-margin {
			margin: 20rpx;
			overflow: hidden;
		}
	}
	
	.img-mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 9;
		background: rgba(0, 0, 0, 0.2)
	}
	
	.img-box-play {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 10;
	}
	

	/* 关注 开始 */
	.cu-card.custom-follow {
		.cu-list {
			height: 130rpx;

			&.menu-avatar>.cu-item .content>view:first-child {
				align-items: flex-start;
			}

			&.menu-avatar>.cu-item .content:after {
				border-bottom: 0;
			}

			&.menu-avatar>.cu-item .content {
				left: 124rpx;
				width: calc(100% - 48px - 30px);
			}

			.cu-avatar {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	/* 关注 结束 */
</style>
